<template>
	<header class="header flex row drag" :class="[isMaximized ? 'is-maximized' : '']">
		<div class="left flex row">
			<!-- 主页 -->
			<div class="menu flex center" @click="$router.push('/')">
				<div class="menu flex center nodrag">
					<i class="el-icon el-icon-menu"></i>
				</div>
			</div>
			<!-- 标签集合 -->
			<tab-list />
		</div>
		<div class="right flex row">
			<!-- 头像/当前登录人 -->
			<div v-if="$store.getters.token" class="avatar flex center">
				<el-popover
					class="avatar-popper nodrag"
					placement="bottom"
					trigger="click"
					@show="isAvatarActive = true"
					@hide="isAvatarActive = false"
				>
					<div class="avatar-popper__body"></div>
					<div
						class="avatar-reference"
						:class="[isAvatarActive ? 'is-active' : '', isAvatarError ? 'is-error' : '']"
						slot="reference"
					>
						<el-image class="avatar-image flex center" :src="$store.getters.avatar" fit="cover" @error="isAvatarError = true">
							<span slot="error" class="avatar-error flex center">
								{{
									$_.isString($store.getters.nickname) && $store.getters.nickname.trim().length
										? $store.getters.nickname.charAt(0)
										: ""
								}}
							</span>
						</el-image>
					</div>
				</el-popover>
			</div>
			<!-- APP模式下窗口控制器 -->
			<template v-if="$remote">
				<div class="minimize nodrag flex center" @click="handleAppMinimize">
					<i class="el-icon el-icon-minus"></i>
				</div>
				<div class="maximize nodrag flex center" @click="handleAppMaximize">
					<i v-if="isMaximized" class="el-icon el-icon-copy-document"></i>
					<span v-else class="maximize-icon"></span>
				</div>
				<div class="close nodrag flex center" @click="handleAppClose">
					<i class="el-icon el-icon-close"></i>
				</div>
			</template>
		</div>
	</header>
</template>
<script>
import bus from "@/bus"
import TabList from "@/components/Header/TabList"
import { isElectronApp, getMainWindow } from "@/utils/electron.js"

export default {
	name: "Header",
	components: {
		TabList,
	},
	props: {},
	data() {
		return {
			isMaximized: false,
			tabList: [],
			activeTabIdx: 1,
			isAvatarActive: false,
			isAvatarError: false,
		}
	},
	computed: {},
	watch: {},
	methods: {
		handleAppMinimize() {
			if (this.$remote) {
				let mainWindow = this.$remote.getCurrentWindow()
				if (mainWindow) {
					if (!mainWindow.isMinimized()) mainWindow.minimize()
				}
			}
		},
		handleAppMaximize() {
			if (this.$remote) {
				let mainWindow = this.$remote.getCurrentWindow()
				if (mainWindow) {
					if (!mainWindow.isMaximized()) mainWindow.maximize()
					else mainWindow.restore()
					this.isMaximized = mainWindow.isMaximized()
				}
			}
		},
		handleAppClose() {
			if (this.$remote) {
				let mainWindow = this.$remote.getCurrentWindow()
				if (mainWindow) {
					if (!mainWindow.isMinimized()) mainWindow.close()
				}
			}
		},
	},
	created() {
		if (this.$remote) {
			let mainWindow = this.$remote.getCurrentWindow()
			if (mainWindow) {
				this.isMaximized = mainWindow.isMaximized()
				bus.$on("resize", event => {
					this.isMaximized = mainWindow.isMaximized()
				})
			}
		} else {
			this.isMaximized = true
		}
	},
	mounted() {},
	beforeDestroy() {},
}
</script>
<style lang="scss" scoped>
.header {
	box-sizing: border-box;
	width: 100%;
	height: 38px;
	font-size: $font-2-size;
	background-color: $font-4-color;

	&.is-maximized {
		height: 32px;
	}

	> .left {
		box-sizing: border-box;
		flex: 1 1 100%;
		align-items: flex-end;
		width: 0;
		height: 100%;
		padding: 0 12px;
		margin-right: 24px;

		> .menu,
		> .tab-list {
			height: 32px;
		}

		> .menu {
			> .menu {
				position: relative;
				width: calc(1em + 6px);
				height: calc(1em + 6px);
				font-size: $head-1-size;
				background-color: $font-4-color;
				line-height: 1;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
					background-color: $transparent-color;
					border-radius: 4px;
					z-index: 1;
					transition: background-color $duration-1;
				}

				&:hover {
					&::after {
						background-color: rgba($white-color, 0.2);
					}
				}
			}
		}
	}

	> .right {
		box-sizing: border-box;
		align-items: flex-start;
		width: auto;
		height: 100%;
		white-space: nowrap;

		> .avatar {
			height: 100%;
			margin-right: 12px;
			line-height: 1;

			> .avatar-popper {
				height: 28px;

				.avatar-reference {
					box-sizing: border-box;
					width: 28px;
					height: 100%;
					line-height: 1;
					background-color: $white-color;
					border: 2px solid $font-4-color;
					border-radius: 50%;
					overflow: hidden;

					&.is-error {
						width: auto;
						border-radius: 4px;
					}

					> .avatar-image {
						box-sizing: border-box;
						width: 100%;
						height: 100%;
						line-height: 1;

						> .avatar-error {
							box-sizing: border-box;
							padding: 0 8px;
							font-size: $font-2-size;
						}
					}
				}
			}
		}

		> .more-popover .more,
		> .minimize,
		> .maximize,
		> .close {
			width: 46px;
			height: 28px;
			font-size: 12px;
			font-weight: normal;
			vertical-align: middle;
			background-color: $font-4-color;

			&.close {
				&:hover {
					color: $white-color;
					background-color: $danger-color;
				}
			}

			> .el-icon-arrow-down {
				font-size: 14px;
			}

			> .el-icon-copy-document {
				transform: rotate(180deg);
			}

			> .el-icon-close {
				font-size: 16px;
			}

			> .maximize-icon {
				box-sizing: border-box;
				width: 1em;
				height: 1em;
				font-size: 10px;
				border: 1px solid currentColor;
			}

			&:hover {
				background-color: shade($font-4-color, 10%);
			}
		}
	}
}
</style>
